<template>
	<view class="app-classify-reservation-type e-flex">
		<view class="app-classify-reservation-type__btn e-flex-xy-center" :class="{'is-active':value === '2'}"
			@tap="handleChange('2')" v-if="typeList.includes('2')">
			<text class="fw-500">{{$t('classify.上门服务')}}</text>
		</view>
		<view class="app-classify-reservation-type__btn e-flex-xy-center" :class="{'is-active':value === '1'}"
			@tap="handleChange('1')" v-if="typeList.includes('1')">
			<text class="fw-500">{{$t('classify.到店服务')}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: String,
			hasValue: String,
		},
		computed:{
			typeList () {
				return (this.hasValue||'').split(',')
			}
		},
		methods: {
			handleChange(type) {
				this.$emit('update:value', type)
			}
		}
	}
</script>

<style lang="scss">
	@include appBem_b(classify-reservation-type) {
		padding: 20rpx;
		@include appBem_e(btn) {
			width: calc((100% - 20rpx)/2);
			height: 112rpx;
			background: #F7F8FB;
			border-radius: 20rpx;

			&:first-child {
				margin-right: 20rpx;
			}

			@include appWhen(active) {
				border: 2rpx solid var(--color-primary);
				background-color: var(--bg-primary);

				text {
					color: var(--color-primary)
				}
			}
		}
	}
</style>